import React from "react"
import styles from "./questionHandle.less"
import { getQuestionHandleList ,getAnswer} from '@/services/index'
import {IQuestionHandleQuery, IQuestionHandleList, IswapParams,IswapParamsList} from "@/utils/interface"
import {observer} from "mobx-react-lite"
import useStore from "@/context/useStore"
import { useState } from "react"
import { useEffect } from "react"
import classNames from 'classnames';
import { Button , Input , Switch , Modal , Table} from 'antd';
import { SearchOutlined,DownOutlined } from '@ant-design/icons';
import { Link } from "umi"

const sources=['网站2021A班']
// const newstatus=['全部','精品','认证','被屏蔽']
const newstatus=[
    {
        stat:'全部',
        status:''
    },
    {
        stat:'精品',
        status:'1'
    },
    {
        stat:'认证',
        status:'2'
    },
    {
        stat:'被屏蔽',
        status:'3'
    },
]
const trainingType=['实训','面试']
const isQuality=['设为精品','取消精品']
const newanswerType=[
    {
        tit:'全部',
        type:''
    },
    {
        tit:'实训',
        type:'0'
    },
    {
        tit:'答辩',
        type:'4'
    },
    {
        tit:'面试',
        type:'1'
    },
    {
        tit:'工作',
        type:'2'
    },
    {
        tit:'其他',
        type:'3'
    },
]

const columns = [
    {
        title:<input type="checkbox"/>,
        render:()=><input type="checkbox"/>,
        align:'center'
    },
    {
        title: '问题名称',
        dataIndex: 'questionTitle',
        align: "center",
    },
    {
        title: '类型',
        dataIndex: 'typeName',
        align: "center",
    },
    {
        title: '发起人',
        dataIndex: 'author',
        align: "center",
    },
    {
        title: '发起时间',
        dataIndex: 'createTime',
        align: "center",
    },
    {
        title: '来源',
        dataIndex: 'source',
        align: "center",
    },
    
];

const QuestionHandle:React.FC=()=>{
    let [curSkill, setCurSkill] = useState('')
    let [curStatus, setCurStatus] = useState(0)
    let [dataSource, setDataSource] = useState<IQuestionHandleList[]>([])
    let [dataAnswer, setDataAnswer] = useState<IswapParamsList[]>([])
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [a, seta] = useState(1);
    let [searchTitle, setSearchTitle] = useState('');
    let queryParams:IQuestionHandleQuery = { searchTitle: '', pageNum: 1, pageSize: 10, classId: 9};
    let [flagList, setflagList] = useState(false)
    let [isModalVisible, setIsModalVisible] = useState(false);
    let swapParams:IswapParams={questionTitle: '',isRight: 0,pageNum: 1, pageSize: 10}
    let [questionTitle,setQuestionTitle]=useState('')
    let [curType,setCurType]=useState('')
    let [curhigh,setCurhigh]=useState(0)
    let [curStatusHigh, setCurStatusHigh] = useState(0)

    let {QuestionHandle}=useStore()

    //发起请求 获取弹框表格数据
    useEffect(() => {
        let newswapParams: IswapParams = swapParams as IswapParams
        //拼接参数
        if (curType) {
            newswapParams = { ...newswapParams,  type: curType }
        }else if(questionTitle){
            console.log(questionTitle,111);
            
            newswapParams = { ...newswapParams,  questionTitle:questionTitle }
        } else {
            newswapParams = { ...newswapParams, type: '' as any }
        }
        getAnswer(newswapParams).then(res=>{
            // console.log(res,'res');
            if(res.code===200){
                setDataAnswer(res.rows)
            }
        })
    }, [isModalVisible,curType,questionTitle])

    //发起请求  获取项目列表
    useEffect(() => {
        let newqueryParams: IQuestionHandleQuery = queryParams as IQuestionHandleQuery
        //拼接参数
        if (curStatus) {
            newqueryParams = { ...newqueryParams,  status: curStatus }
        }else if(searchTitle){
            newqueryParams = { ...newqueryParams,  searchTitle:searchTitle }
        } else {
            newqueryParams = { ...newqueryParams, status: '' as unknown as number }
        }
        getQuestionHandleList(newqueryParams).then(res=>{
            // console.log(res,'123');
            if(res.code === 200){
                setDataSource(res.rows)
            }
        })
        
    }, [curSkill, curStatus, isMyInfo, searchTitle]);
    

    //屏蔽
    function onChange(value:string,flag:number) {
        if(flag){
            //走 deleteShield
            QuestionHandle.getChecked(value)
        }else{
            //走 shield
            QuestionHandle.getCheck(value)
        }
    }
    useEffect(()=>{
        let newqueryParams: IQuestionHandleQuery = queryParams as IQuestionHandleQuery

        getQuestionHandleList(newqueryParams).then(res=>{
            // console.log(res,'123');
            if(res.code === 200){
                setDataSource(res.rows)
            }
        })

    },[a])

    //精品
    function setBoutique(value:string,flag:number){
        seta(a+1)
        // console.log(111,flag);
        // setflagList(!flagList)
        if(flag){
            //走 deleteQuality
            QuestionHandle.getQuality(value)
            // console.log(value);
           
            
        }else{
            //走 quality
            QuestionHandle.getQualit(value)
            

        }
       
    }

    function showModal ()  {
        setIsModalVisible(true);
    };

    function handleOk  (){
        setIsModalVisible(false);
    };

    function handleCancel () {
        setIsModalVisible(false);
    };


    return <div className={styles.questionhandle}>
        <section className={styles.question}>
            <div className={styles.box_con}>
                <div className={styles.box_contop}>
                    <h2>来源:</h2>
                    {
                        sources.map((item,index)=>{
                            return <span  className={item === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item)} key={item}>{item}</span>
                        })
                    }
                </div>
                <div className={styles.box_conbot}>
                    <h2>状态:</h2>
                    {
                        newstatus.map((item,index)=>{
                            return <span  className={index === curStatusHigh ? classNames(styles.act) : ''} key={item.stat} onClick={e => {setCurStatus(Number(item.status)),setCurStatusHigh(index)}}>{item.stat}</span>
                        })
                    }
                </div>
            </div>
            <div className={styles.box_tent}>
                <div className={styles.box_tenttop}>
                    <span>待处理问答</span>
                    <span>所有问答</span>
                </div>
                <div className={styles.box_tentcon}>
                    <div className={styles.tentcon_top}>
                        <div className={styles.top_nav}>
                            <div className={styles.allcheck}>
                                <input type="checkbox"/>
                                <span>全选</span>
                            </div>
                            <div className={styles.allright}>
                                <Button>批量回答</Button>
                                <Button>批量选择相似问题答案</Button>
                                <Input className={styles.input} placeholder="搜索问答" suffix={<SearchOutlined onClick={()=>setSearchTitle(title)}/>} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                                    if (e.keyCode === 13){
                                        setSearchTitle(title)
                                    }
                                }}/>
                            </div>
                        </div>
                    </div>
                    <div className={styles.tentcon_list} >
                        {
                            //QuestionHandle.QuestionHandleList
                            dataSource.map((item:any,index:number)=>{
                                return <div  className={styles.tentcon_lis} key={index}>
                                    <div className={styles.lis1}>
                                        <div className={styles.lis1_left}>
                                            <span>{item.className}</span>
                                            <span>{item.qUserName}</span>
                                            <span>{item.replyTime}发布</span>
                                            <span>实训类型：<span className={styles[`typenum${item.typeNum}`]}>{trainingType[Number(item.typeNum)]}</span></span>
                                        </div>
                                        <div className={styles.lis1_right}>
                                            <img src="" alt=""/>
                                            <span>{item.answerCount}</span>
                                        </div>
                                    </div>
                                    <div className={styles.lis2}>
                                        <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt=""/>
                                        <span>{item.questionTitle}</span>
                                    </div>
                                    <div className={styles.lis3}>
                                        <div className={styles.lis3_left}>
                                            <input type="checkbox"/>
                                        </div>
                                        <div className={styles.lis3_cen}>
                                            <div>{item.questionContent}</div>
                                            <div>查看全部<DownOutlined></DownOutlined></div>
                                        </div>
                                        <div className={styles.lis3_bot}>
                                            <Switch defaultChecked={Boolean(item.shield)} onChange={()=>onChange(item.answerId,item.shield)}/>
                                        </div>
                                    </div>
                                    <div className={styles.lis4}>
                                        <Link to={`/teachers/AnswerDetailManage?answerId=${item.answerId}`}>
                                            <Button type="primary">回答</Button>
                                        </Link>
                                        <Button type="primary" onClick={()=>{
                                            showModal()
                                        }}>选择其他有“正确答案”的类似问题</Button>
                                        <Modal
                                         width="70%"
                                        title={
                                            <div>
                                                <div style={{fontSize:'18px',paddingBottom:'15px'}}>选择其它有“正确答案”的类似问题</div>
                                                <div className={styles.answertype}>
                                                    <h3>类型:</h3>
                                                    {
                                                        newanswerType.map((item,index)=>{
                                                            return <span className={index === curhigh ? classNames(styles.types) : ''} key={item.tit}  onClick={() =>{ setCurType(item.type);setCurhigh(index)}}>{item.tit}</span>
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        } visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} maskStyle={{background:'rgba(122,122,124,0.1)'}}>
                                            <div>
                                                <div style={{display:'flex',alignItems:'center',paddingBottom:'20px',paddingTop:'20px'}}>
                                                    <div className={styles.s1} style={{display:'flex',alignItems:'center',marginLeft:'52%'}}>
                                                        <input type="checkbox" checked={isMyInfo} onChange={e=>setMyInfo(e.target.checked)} style={{marginLeft:"5px",marginTop:'3px'}}/><span style={{paddingLeft:'10px',fontSize:'14px'}}>仅显示有正确答案</span>
                                                    </div>
                                                    <Input style={{marginLeft:'40px',width:'200px',fontSize:'14px'}} placeholder="搜索问题" suffix={<SearchOutlined onClick={() => { questionTitle(title) }} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                                                        if (e.keyCode === 13) {
                                                            setQuestionTitle(title)
                                                        }
                                                    }} />
                                                </div>
                                                <Table className={styles.tables} rowKey='interviewId' key={item} dataSource={dataAnswer} columns={columns as any} />
                                            </div>
                                        </Modal>
                                        <Button key={JSON.stringify(item.quality)} className={styles[`quality${item.quality}`]} onClick={()=>setBoutique(item.answerId,item.quality)}>{isQuality[Number(item.quality)]}</Button>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        </section>
    </div>   
}

export default observer(QuestionHandle)